<style scoped lang="scss">
          //重新定义控制面板的样式 1016 鲍小伟
          .el-date-table td .el-date-table-cell .el-date-table-cell__text{
            border-radius: 6px!important;
          }
          .el-date-table td.current:not(.disabled) .el-date-table-cell__text{
            background-color: var(--el-datepicker-active-color); 
            color: #ffffff;
          }
          .el-picker-panel__content{
            .el-date-table__row{
                .today{
                    .el-date-table-cell{
                        span{
                            background-color: var(--el-datepicker-active-color); 
                            color: #ffffff;
                        }
                    }
                }
                .disabled {
                    .el-date-table-cell{
                        span{
                           background: none;
                        }
                    }
                }

                .el-date-table-cell{
                    span{
                        // background: #E1F6FF;
                         background: #E1F6FF;
                    }
 
                    .weekend{
                        // color:#E53222;
                        font-weight: 600;
                    }
                    .normalwarn{
                        background: #FDE1C4;
                    }
                    .warns{
                        background: #F3C3BD;
                    }

                }
            }
          }

          //

</style>
<template>
  <div class="el-date-table-cell">
    <span
      class="el-date-table-cell__text"
      :class="{
        selected: isSelected,
        weekend: weekendClass,
        normalwarn: count > 0,
        warns: count2 > 0
      }"
    >
      {{ date?.getDate() ?? '' }}
    </span>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import dayjs from 'dayjs'
// import { listWarnrecords } from "@/api/system/warnrecords"

/* 接收父组件传进来的格子信息 */
const props = defineProps({
  date:         { type: Date,    default: null },
  isSelected:   { type: Boolean, default: false },
  weekendClass: { type: String, default: '' }
})

/* 当天告警数 */
const count = ref(0)  //一般告警数目
const count2 = ref(0) //告警数目
/* 查询函数 */
async function query() {
  if (!props.date) return
  const dayStr = dayjs(props.date).format('YYYY-MM-DD')
  /* 未来日期不查 */
//   if (dayjs(props.date).isAfter(dayjs(), 'day')) return  //每天日期都查询即可去除缓存

  const res = await listWarnrecords({ warnday: dayStr, warntime: 1 })
  count.value = res.total ?? 0
}
// 告警数
async function query2() {
  if (!props.date) return
  const dayStr = dayjs(props.date).format('YYYY-MM-DD')
//   /* 未来日期不查 */
//   if (dayjs(props.date).isAfter(dayjs(), 'day')) return //每天日期都查询即可去除缓存

  const res = await listWarnrecords({ warnday: dayStr, warntime: 2 })
  count2.value = res.total ?? 0
}

/* 首次渲染 + 日期变化都重新查 */
onMounted(()=>{
  query()
  query2()
})
watch(() => props.date, query)
watch(() => props.date, query2)

</script>